<template>
    <div class="login-wrapper ui container">
        <div class="ui header centered">
            <span class="logo"></span>
        </div>
        <div class="ui very relaxed centered grid" style="margin-top: 10px;">
            <div class="eight wide column">
                <div class="ui blurring piled segment" ref="forDimmer">

                    <form action="" class="ui centered form" @submit.prevent="onSubmit">
                        <div class="ui header myheader" >用户登录</div>
                        <!--<div class="two fields">-->
                        <div class="fluid field">
                            <!--<div class="required error six wide field">-->
                            <label for="">用户名</label>
                            <input type="text" v-model="user.name" name="username" id="username" placeholder="请输入用户名"
                                   @focus="onf">
                        </div>
                        <!--<div class="disabled ten wide field">-->
                        <div class="fluid field">
                            <label for="">密码</label>
                            <!--<input type="text" disabled>-->
                            <input type="password" v-model="user.passWd" name="password" id="password"
                                   placeholder="请输入密码"
                                   @focus="onf">
                        </div>
                        <div class="result field" :class="result_type">
                            {{result}}
                        </div>
                        <!--</div>-->
                        <button type="submit" class="ui button sub_btn">登 录</button>
                    </form>
                    <!--<button type="button" class="ui button" @click="show_dimmer">登 录</button>-->
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">

    const RS_OK = 1;
    import util from '_util/index';
    import tool from 'src/util/tool';
    export default{
        data(){
            return {
                cmap: [],
                user: {},
                result: '',
                result_type: 'rs_error',
            }
        },
        methods: {
            show_dimmer(){
                util.showDimmer(this);
            },
            toHide(){

            },
            onSubmit(){

                let url = '/user/login/login'

                let options = {
                    body: this.user,
                    method: 'POST'
                };


                this.$http.post(url, this.user).then((rs) => {

                    let obj = rs.data
                    if (obj.status == RS_OK) {

                        util.modelFn('Auth', 'set_user_auth', this, (rs) => {
                            if (!rs) {
                                util.eventEmit(this, 'logout');
                                this.result = "抱歉，该用户没有权限，请联系相关人员分配权限后再尝试登陆";
                            } else {
                                this.result_type = 'rs_ok';
                                this.result = '登录成功!';


                                setTimeout(() => {
                                    this.$emit('afterLogin');
                                    this.$router.push('/page/home');
                                }, 300);
                            }
                        });


                    } else {
                        this.result = obj.msg ? obj.msg : "登录失败，请检查账户信息";
                    }
                })

            },
            onf(){
                this.result = ""
            }
        },
        components: {},
        props: [],
        created(){
            this.cmap = ['decrease', 'discount', 'guarantee', 'invoice', 'special']

        }
    }
</script>
<style rel="stylesheet/less" lang="less">

    @import "../../common/style/mixin";

    @dir: "../assets/imgs/";

    .login-wrapper {
        /*margin-top:50%;*/
        /*transform: translateY(-50%);*/
        position: fixed;
        top: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        transform: translateY(-50%);

        .logo {
            display: inline-block;
            width: 192px;
            height: 80px;
            .bg-img(@dir, 'logo2.png', 100%, 100%);

        }
        form {

            .ui.header.myheader{
                line-height:38px;
                font-size:18px;
                /*background: #D8D8D8;*/
                /*border-radius: 6px;*/
                /*text-align: center;*/
                color: rgba(57, 57, 59,0.8);
            }
            .sub_btn{
                background-color: rgba(17,176,195,0.7);
                color: rgba(255,255,255,0.8);
                &:hover,&:visited{
                    background-color: rgba(17,176,195,0.9);
                    color: rgba(255,255,255,0.9);
                }
            }
            width: 100%;
            margin: 0 auto;
            legend {

            }

            .result {

            }
            .rs_ok {
                color: green;
            }
            .rs_error {
                color: rgb(240, 20, 20);
            }
        }
    }
</style>
